<!-- 
  @name: 售后填写
  @date: 2020.4.7
 -->
<template>
	<view class="content">
		<view class="cardview">
			<view class="item t1">
				<view class="left">维修人员</view>
				<view class="right">
					<text
						:class="repairName ? '' : 'choose'"
						@tap="personSel = true"
						v-text="repairName ? repairName : '选择维修人员'"></text>
				</view>
			</view>
			<view class="item t2">
				<view class="left">更换配件</view>
				<view class="right">
					<view class="list" v-for="(item, index) in partsInfo" :key="index">
						<view class="input-view">
							<input placeholder="配件名称" placeholder-class="phcoloe" v-model.trim="item.partsName" />
							<view class="jianhao" v-if="index > 0" @tap="reduPart(item, index)"></view>
						</view>
						<view class="input-view" style="margin-top: 25rpx;">
							<input type="digit" placeholder="配件价格" placeholder-class="phcoloe" v-model.trim="item.partsprice" />
							<text>元</text>
						</view>
						<view class="btnview">
							<view class="btn" :class="item.feeType === 0 ? 'sl' : ''" @tap="changeFee(item, index, 0)">三包</view>
							<view class="btn" :class="item.feeType === 1 ? 'sl' : ''" @tap="changeFee(item, index, 1)">收费</view>
						</view>
					</view>
					<view class="addbtn" @tap="addPart">+&nbsp;添加配件</view>
				</view>
			</view>
			<view class="item">
				<view class="left">其他费用</view>
				<view class="right">
					<view class="input-view">
						<input type="digit" v-model.trim="item.otherPrice" />
						<text>元</text>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="left">尿素液损耗</view>
				<view class="right">
					<view class="input-view">
						<input type="digit" v-model.trim="item.ureaLoss" />
						<text>kg</text>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="tip">(配件、其他费用、尿素损耗，三个选项中至少填写一个选项)</view>
			</view>
		</view>
		
		<view class="cardview">
			<view class="item t1">
				<view>上传现场照片<text class="tip">（不超过5张）</text></view>
			</view>
			<view class="item2">
				<view class="img" v-for="(item, index) in picList" :key="index">
					<image class="i" :src="item"></image>
					<view class="c" @tap="reduPic(item, index)"></view>
				</view>
				<view class="img up" @tap="choosePic">
					<view class="icon"></view>
				</view>
			</view>
			<view class="item">
				<view class="desc-tle">
					<view class="icon"></view>
					<text>备注</text>
				</view>
			</view>
			<view class="item">
				<textarea class="desc-cont" v-model="repairDesc"></textarea>
			</view>
		</view>
		
		<!-- 选择维修人员-弹窗 -->
		<view class="_popup" v-show="personSel" @tap="personSel = false"></view>
		<view class="select" :class="personSel ? 'h1' : 'h2'">
			<view class="title">选择维修人员</view>
			<view class="list">
				<view
					class="item"
					v-for="(item, index) in personList"
					:key="item.staffId">
					<text class="text">{{item.staffName}}</text>
					<view :class="repairName === item.staffName ? 'icon-1' : 'icon-2'" @tap="personChe(item, index)"></view>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="bottom_blank"></view>
		<view class="bottom_view">
			<button class="btn_submit" @tap="submit">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				personSel: false,  //是否进行安装人员选择
				personList: [],  //安装人员数组
				picList: [],  //现场图片数组
				macCode: '',  //机器码
				repairName: '',  //安装人员
				partsInfo: [
					{
						partsName: '',
						partsprice: '',
						feeType: 0
					}
				],  //配件数组
				otherPrice: '',  //其他费用
				ureaLoss: '',  //尿素损耗量
				repairDesc: '',  //备注
			}
		},
		onLoad(e) {
			this.macCode = e.macCode;
			this.getPersonList();
		},
		onShow() {
			if(this.$store.state.reLogin) {
				// this.getPersonList();
				this.$store.commit('hasLogin');
			}
		},
		methods: {
			//删除多余的配件
			reduPart(item, index) {
				this.partsInfo.splice(index, 1);
			},
			//添加配件
			addPart() {
				let partsInfoItem = {
					partsName: '',
					partsprice: '',
					feeType: 0
				};
				this.partsInfo.push(partsInfoItem);
			},
			//改变收费方式
			changeFee(item, index, code) {
				this.partsInfo[index].feeType = code;
			},
			//选择安装人员
			personChe(item, index) {
				this.personSel = false;
				this.repairName = item.staffName;
			},
			//删除图片
			reduPic(item, index) {
				this.picList.splice(index, 1);
			},
			//选择图片
			choosePic() {
				if(this.picList.length >= 5) {
					return;
				}
				uni.chooseImage({
					count: 5 - this.picList.length,  //最多选择个数
					success: (data) => {
						let arr = data.tempFilePaths;
						arr.forEach(path => {
							this.$http({
								upload: true,
								filePath: path
							}).then(res => {
								this.picList.push(res);
							});
						});
					}
				});
			},
			//获取安装人员列表
			getPersonList() {
				this.$http({
					url: this.$api.factoryUrl + 'getfactorystaffpage'
				}).then(res => {
					this.personList = res;
				});
			},
			//提交
			submit2() {
				this.$http({
					url: this.$api.factoryUrl + 'adddevicerepair',
					data: {
						macCode: this.macCode,
						repairName: this.repairName,
						partsInfo: !this.partsInfo[0].partsName ? '[]' : JSON.stringify(this.partsInfo),
						otherPrice: this.otherPrice ? parseFloat(this.otherPrice) : 0,
						ureaLoss: this.ureaLoss ? parseFloat(this.ureaLoss) : 0,
						repairDesc: this.repairDesc,
						scenePhoto: this.$arrToStr(this.picList)
					}
				}).then(res => {
					this.$successToast('添加成功');
					this.$sucBack();
				});
			},
			submit() {
				if(!this.repairName) {
					this.$showToast('请选择维修人员！');
					return;
				}
				if((!this.partsInfo[0].partsName || this.partsInfo[0].partsprice === '') && this.otherPrice === '' && this.ureaLoss === '') {
					uni.showModal({
						content: '配件、其他费用、尿素损耗，三个选项中至少填写一个选项'
					});
					return;
				}
				if(this.picList.length === 0) {
					this.$showToast('请上传现场照片！');
					return;
				}
				this.submit2();
			}
		}
	}
</script>

<style lang="scss">
	.content {
		align-items: center;
	}
	
	input {
		width: 288rpx;
		height: 60rpx;
		text-align: center;
		margin-right: 40rpx;
		border-radius: 8rpx;
		border: 1rpx solid $color-list;
	}
	.input-view {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.cardview {
		width: 730rpx;
		padding-top: 60rpx;
		padding-left: 30rpx;
		padding-right: 20rpx;
		padding-bottom: 50rpx;
		margin-top: $spacing-col;
		background-color: $color-white;
		border-radius: $border-radius-bm;
		.item.t1 {
			margin-top: 0;
		}
		.item.t2 {
			margin-top: 60rpx;
			align-items: flex-start;
			.left {
				margin-top: 5rpx;
			}
		}
		.item {
			width: 100%;
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.left {
				width: 300rpx;
			}
			.right {
				flex: 1;
			}
			.choose {
				color: $color-primary;
			}
			.tip {
				font-size: 24rpx;
				color: $color-grey;
			}
		}
		.list {
			width: 100%;
			margin-bottom: 30rpx;
			padding-bottom: 22rpx;
			border-bottom: 1rpx solid $color-list;
		}
		.jianhao {
			width: 32rpx;
			height: 32rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16NOuKACXRsAAACJPskM-I212.png');
		}
		.btnview {
			width: 100%;
			margin-top: 25rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.btn {
				width: 100rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				margin-right: 47rpx;
				font-size: 22rpx;
				border-radius: 24rpx;
				background-color: $color-bg;
			}
			.btn.sl {
				color: $color-white;
				background-color: $color-text-primary;
			}
		}
		.addbtn {
			width: 356rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			color: $color-text-primary;
			border-radius: 26rpx;
			background-color: #DEE0F0;
		}
		.item2 {
			width: 100%;
			margin-top: 30rpx;
			.img {
				display: inline-block;
				position: relative;
				width: 130rpx;
				height: 130rpx;
				margin-top: 10rpx;
				margin-right: 20rpx;
				.i {
					width: 100%;
					height: 100%;
				}
				.c {
					position: absolute;
					top: 3rpx;
					right: 3rpx;
					width: 26rpx;
					height: 26rpx;
					background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15l7FyAcnkVAAAEiSf4WeE606.png');
				}
			}
			.img.up {
				background-color: $color-bg;
				.icon {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					width: 36rpx;
					height: 61rpx;
					background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16L4jGAEC_iAAALKmFTzp8282.png');
				}
			}
		}
		.desc-tle {
			width: 100%;
			margin-top: 30rpx;
			color: $color-text-primary;
			display: flex;
			flex-direction: row;
			align-items: center;
			.icon {
				width: 25rpx;
				height: 25rpx;
				margin-right: 15rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16MUMmAftEdAAABuYzvFrA053.png');
			}
		}
		.desc-cont {
			width: 670rpx;
			height: 180rpx;
			padding: 10rpx;
			background-color: $color-bg;
		}
	}
	
	/* 选择维修人员 */
	.select.h1 {
		height: calc(100vh - 400rpx);
	}
	.select.h2 {
		height: 0;
	}
	.select {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 750rpx;
		z-index: $z-index-popup-info;
		background-color: $color-white;
		border-radius: 20rpx 20rpx 0 0;
		transition: height 0.3s;
		.title {
			width: 100%;
			height: 90rpx;
			padding-top: 50rpx;
			padding-bottom: 15rpx;
			text-align: center;
			font-size: 32rpx;
			color: $color-primary;
		}
		.list {
			width: 100%;
			height: calc(100vh - 490rpx);
			padding: 0 60rpx;
			padding-bottom: 50rpx;
			overflow-y: scroll;
		}
		.item {
			width: 100%;
			margin-top: 65rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.text {
				flex: 1;
			}
		}
		.icon-1 {
			width: 40rpx;
			height: 40rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16L6_CAC-MBAAAFMha2HcI447.png');
		}
		.icon-2 {
			width: 38rpx;
			height: 38rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16L692Ac36SAAAD0w0_KrE071.png');
		}
	}
	
</style>
